<template>
	<view class="zq-button"
		:style="{
			'width':props.width + 'rpx',
			'height':props.height + 'rpx',
			'margin':props.margin
		}">
		<button class="zq-button-content"
			:style="{
				'background':typeColors[findName(props.type)].background,
				'color':typeColors[findName(props.type)].color,
				'width':props.width + 'rpx',
				'height':props.height + 'rpx',
				'lineHeight':props.height - 4 + 'rpx',
				'borderRadius':props.borderRadius + 'rpx',
				'border':'2rpx solid ' + (findName(props.type) == 'default' ? typeColors[findName(props.type)].color : typeColors[findName(props.type)].background)
			}"
			:open-type="props.openType"
			:app-parameter="props.appParameter"
			@click.stop="click"
			@getuserinfo="getuserinfo"
			@getphonenumber="getphonenumber"
			@error="error"
			@opensetting="opensetting"
			@launchapp="launchapp"
			@contact="contact"
			@chooseavatar="chooseavatar"
			@addgroupapp="addgroupapp"
			@chooseaddress="chooseaddress"
			@chooseinvoicetitle="chooseinvoicetitle"
			@subscribe="subscribe"
			@login="login">
			<view class="loading" :style="{'--borderColor':typeColors[findName(props.type)].color}" v-if="props.loading"></view>
			<view><slot></slot></view>
		</button>
		<view class="check"
			:style="{
				'width':props.width + 'rpx',
				'height':props.height + 'rpx'
			}" v-if="!props.check || lock" @click="check()"></view>
		<view class="disabled"
			:style="{
				'width':props.width + 'rpx',
				'height':props.height + 'rpx'
			}" v-if="props.disabled || props.loading"></view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onMounted} from "vue";
	interface Color{
		color:string,
		background:string
	}
	const props = withDefaults(defineProps<{
		width?:number | string,
		height?:number | string,
		type?:string,
		borderRadius?:number | string,
		colors?:{default?:Color,primary?:Color,success?:Color,info?:Color,warning?:Color,danger?:Color,black?:Color} | null,
		disabled?:boolean,
		loading?:boolean,
		openType?:string,
		appParameter?:string,
		check?:boolean,
		delay?:number,
		margin?:number | string
	}>(),{
		width:654,//宽度
		height:96,//高度
		type:"default",//类型
		borderRadius:48,//圆角
		margin:'',
		colors:null,//类型颜色
		disabled:false,//是否禁用
		loading:false,//加载
		check:true,//点击检测
		delay:200,//防止重复点击时长
		
		openType:"",//开放类型
		appParameter:""//打开APP时，向APP传递的参数,open-type=launchApp时有效
	})
	const emits = defineEmits<{
		(e:"click",event:any):void,
		(e:"check",event:any):void,
		(e:"getphonenumber",event:any):void,
		(e:"getuserinfo",event:any):void,
		(e:"error",event:any):void,
		(e:"opensetting",event:any):void,
		(e:"launchapp",event:any):void,
		(e:"contact",event:any):void,
		(e:"chooseavatar",event:any):void,
		(e:"addgroupapp",event:any):void,
		(e:"chooseaddress",event:any):void,
		(e:"chooseinvoicetitle",event:any):void,
		(e:"subscribe",event:any):void,
		(e:"login",event:any):void
	}>()
	
	onMounted(()=>{
		if(props.colors){
			for(let key in props.colors){
				typeColors[props.colors[key]] = props.colors[key];
			}
		}
	})
	
	const typeColors = reactive({
		"default":{color:"#FFFFFF",background:"linear-gradient(to right, #3972FF, #A369FF)"},
		"primary":{color:"#ffffff",background:"#409eff"},
		"success":{color:"#ffffff",background:"#67c23a"},
		"info":{color:"#ffffff",background:"#909399"},
		"black":{color:"#ffffff",background:"#181D2D"},
		"warning":{color:"#ffffff",background:"#e6a23c"},
		"danger":{color:"#ffffff",background:"#FA5151"},
	})
	const types = reactive(["default","primary","success","info","warning","danger","black"])
	const lock = ref(false);
	
	//methods
	const findName = (name:string):string=>{
		return types.indexOf(name) == -1 ? "default" : name
	}
	const click = (event:any):void=>{
		lock.value = true;
		setTimeout(():any=>{
			lock.value = false;
		},props.delay);
		emits("click",event);
	}
	const check = (event:any):void=>{
		emits("check",event);
	}
	const getphonenumber = (event:any):void=>{
		emits("getphonenumber",event);
	}
	const getuserinfo = (event:any):void=>{
		emits("getuserinfo",event);
	}
	const error = (event:any):void=>{
		emits("error",event);
	}
	const opensetting = (event:any):void=>{
		emits("opensetting",event);
	}
	const launchapp = (event:any):void=>{
		emits("launchapp",event);
	}
	const contact = (event:any):void=>{
		emits("contact",event);
	}
	const chooseavatar = (event:any):void=>{
		emits("chooseavatar",event);
	}
	const addgroupapp = (event:any):void=>{
		emits("addgroupapp",event);
	}
	const chooseaddress = (event:any):void=>{
		emits("chooseaddress",event);
	}
	const chooseinvoicetitle = (event:any):void=>{
		emits("chooseinvoicetitle",event);
	}
	const subscribe = (event:any):void=>{
		emits("subscribe",event);
	}
	const login = (event:any):void=>{
		emits("login",event);
	}
</script>

<style lang="scss" scoped>
	button{
		padding: 0 !important;
		margin: 0 !important;
		border: none;
		border-radius: 0;
		&::before{
			border: none;
			border-radius: 0;
		}
		&::after{
			border: none;
			border-radius: 0;
		}
	}
	
	.zq-button{
		position: relative;
		box-sizing: border-box;
		text-align: center;
		box-shadow: 0px 20 20px -7px rgba(92,111,255,0.3);
		.check{
			position: absolute;
			left: 0;
			top: 0;
		}
		.disabled{
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(255, 255, 255, 0.3);
		}
		.zq-button-content{
			transition: scale 0.3s;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			font-weight: 400;
			.loading{
			    position: relative;
			    width: 36rpx;
			    height: 36rpx;
			    /*只需要一条边显现*/
			    /*将其它边设置透明*/
			    border: 4rpx solid transparent;
			    /*显示顶部边*/
			    border-top-color:var(--borderColor);
			    border-radius: 50%;
			    animation: rotate 2.2s linear infinite;
				margin-right: 20rpx;
			}
			.loading::before{
			    content: '';
			    position: absolute;
			    top: 3rpx;
			    right: 3rpx;
			    bottom: 3rpx;
			    left: 3rpx;
			    border: 4rpx solid transparent;
			    /*显示顶部边*/
			    border-top-color:var(--borderColor);
			    border-radius: 50%;
			    animation: rotate 1.6s linear infinite;
			}
			.loading::after{
			    content: '';
			    position: absolute;
			    top: 9rpx;
			    right: 9rpx;
			    bottom: 9rpx;
			    left: 9rpx;
			    border: 4rpx solid transparent;
			    /*显示顶部边*/
			    border-top-color:var(--borderColor);
			    border-radius: 50%;
			    animation: rotate 1s linear infinite;
			}
		}
	}
	/*定义动画*/
	@keyframes rotate {
	    0%{
	        transform: rotate(0);
	    }
	    100%{
	        /*顺时针转360*/
	        transform: rotate(360deg);
	    }
	}
</style>
